<template>
    <div>
        <div class="card card-item">
            <ul class="list-swap">
                <li>
                    <div class="name">在线预约</div>
                    <div class="wd-tip-wrap">
                        <div class="subname">服务事项数</div>
                        <span class="item">
                            {{parseInt(indexData.countNetMatter)}}
                        </span><span class="unit">项</span>
                         <wdTip tipkey="key7" />
                    </div>
                    <div class="wd-tip-wrap" >
                        <div class="subname">预约总数</div>
                        <span class="numbers">
                            <ICountUp
                                      :endVal="parseInt(indexData.countNetApply)"
                                      :key="Math.random()"
                                      @ready="onReady"
                            />
                        </span><span class="unit">件</span>
                         <wdTip tipkey="key0" />
                    </div>
                </li>
                <li>
                    <div class="name">在线办理</div>
                    <div class="wd-tip-wrap">
                        <div class="subname">服务事项数</div>
                        <span class="item">
                            {{parseInt(indexData.countNetMatterQlc)}}
                        </span><span class="unit">项</span>
                         <wdTip tipkey="key8" />
                    </div>
                    <div class="wd-tip-wrap" @click="pupOpen($event)">
                        <div class="subname">办件总数</div>
                        <span class="numbers" >
                            <ICountUp
                                :endVal="parseInt(indexData.countNetAccept)"
                                :key="Math.random()"

                                @ready="onReady"
                            />
                        </span><span class="unit">件</span>
                         <wdTip tipkey="key0" />
                    </div>
                </li>
                <li>
                    <div class="name">物流快递</div>
                    <div class="wd-tip-wrap">
                        <div class="subname">服务事项数</div>
                        <span class="item">
                            {{parseInt(indexData.countApproveExpressMatter)}}
                        </span><span class="unit">项</span>
                         <wdTip tipkey="key9" />
                    </div>
                    <div class="wd-tip-wrap">
                        <div class="subname">物流总数</div>
                        <span class="numbers">
                            <ICountUp
                                      :endVal="parseInt(indexData.countApproveExpressRate)"
                                      :key="Math.random()"
                                      @ready="onReady"
                            />
                        </span><span class="unit">次</span>
                         <wdTip tipkey="key1" />
                    </div>
                </li>
                <li>
                    <div class="name">电子证照</div>
                    <div class="wd-tip-wrap">
                        <div class="subname">服务事项数</div>
                        <span class="item">
                            {{parseInt(indexData.countCardShare)}}
                        </span><span class="unit">项</span>
                         <wdTip style="bottom:0;top:auto"  tipkey="key10" />
                    </div>
                    <div class="wd-tip-wrap">
                        <div class="subname">调用总数</div>
                        <span class="numbers"><ICountUp
                                      :endVal="parseInt(indexData.countCardUse)"
                                      :key="Math.random()"
                                      @ready="onReady"
                            /></span><span class="unit">次</span>
                        <wdTip style="bottom:0;top:auto"  tipkey="key0" />
                    </div>
                </li>
            </ul>
            <div class="cornerTL"></div>
            <div class="cornerTR"></div>
            <div class="cornerBL"></div>
            <div class="cornerBR"></div>
        </div>
    </div>
</template>

<script>
    import ICountUp from 'vue-countup-v2'
    import wdTip from  '../tip'
    import { mapMutations } from 'vuex'
    export default {
        name: 'ApptListGov',
        components: {
            ICountUp,
            wdTip
        },
        props:['indexData'],
        data () {
            return {

            }
        },
        mounted(){
        },
        methods: {
            ...mapMutations([
                'UPDATE_PUP','UPDATE_PUP_POSITION'
            ]),
            pupOpen(event){
                this.UPDATE_PUP({
					name: this.$store.state.pup.name,
                    show: true,})
				this.UPDATE_PUP_POSITION({
					top: event.clientY +'px',
					left: event.clientX+'px'
				})
                setTimeout(()=>{
					this.UPDATE_PUP_POSITION({
						top: '50%',
						left: '50%'
					})
                },290)
            },
            onReady(instance, CountUp) {
                instance.update();
            },
        }
    }

</script>
<style lang="less">
    body{
        //background: #010c16 url(img/body-bg.png) center no-repeat;
        background-size: cover ;
    }
    .card{
        box-sizing: border-box;
        width: 933px;
        min-height: 300px;
    }
    .card-bg{
        background: url(img/card-bg.png) center bottom no-repeat;
        background-size:contain ;
    }
    .card-item{
        position: relative;
        margin-top: -21px;
        padding: 30px 50px 30px 20px;
        height: 666px;
        background: rgba(5,54,105,.3);
    }
    .card-item .cornerTL,
    .card-item .cornerTR,
    .card-item .cornerBL,
    .card-item .cornerBR{
        position: absolute;
        left:0;
        top:0;
        width: 26px;
        height:26px;
        border:5px solid #2d93ed;
    }
    .card-item .cornerTL{
        border-width: 5px 0 0 5px;
    }
    .card-item .cornerTR{
        left:auto;
        right:0px;
        border-width: 5px 5px 0 0;
    }
    .card-item .cornerBL{
        top:auto;
        bottom:0px;
        border-width: 0 0 5px 5px;
    }
    .card-item .cornerBR{
        left:auto;
        top:auto;
        right:0px;
        bottom:0px;
        border-width: 0  5px 5px 0;
    }

    .list-swap{
        list-style: none;
        margin: 0;
        padding: 30px;
    }
    .list-swap li{
        display: flex;
        justify-content:space-between;
        color:#fff;
    }
    .list-swap li>div{
        text-align: center;
    }
    .list-swap li .name{
        margin-top: 20px;
        width: 300px;
        height: 130px;
        font-size: 44px;
        background: url(img/itemname-bg.png) center bottom 16px no-repeat;
        background-size:contain;
    }
    .list-swap li .subname{
        font-size: 30px;
    }
    .list-swap li .item{
        font-size: 56px;
        display: inline-block;
        width: 140px;
        color:#00d4ff;
    }
    .list-swap li .numbers{
        font-size: 56px;
        text-align: center;
        display: inline-block;
        width: 210px;
        color:#00d4ff;
    }
    .list-swap li .unit{
        font-size: 30px;
        color:#00d4ff;
    }
</style>
